<template>
  <div class="content">
    <Editor ref="tinymceRef" :initial-value="modelValue" :init="init"></Editor>
  </div>
</template>
<script setup>
import { CMSApiUpload, } from "@/api/api"
import tinymce from "tinymce"
import Editor from "@tinymce/tinymce-vue"
import 'tinymce/themes/silver/theme'
import 'tinymce/models/dom'
import 'tinymce/icons/default'
import { watch, watchEffect } from "vue"
// tinymce插件可按自己的需要进行导入
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image' // 插入上传图片插件
// import "tinymce/plugins/importcss"; //图片工具
// import 'tinymce/plugins/media' // 插入视频插件
// import 'tinymce/plugins/table' // 插入表格插件
// import 'tinymce/plugins/lists' // 列表插件
// import "tinymce/plugins/charmap"; // 特殊字符
// import 'tinymce/plugins/wordcount' // 字数统计插件
// import "tinymce/plugins/codesample"; // 插入代码
import "tinymce/plugins/code" // 查看源码
import "tinymce/plugins/fullscreen" //全屏
// import 'tinymce/plugins/link' //
// import 'tinymce/plugins/preview' // 预览
// //import "tinymce/plugins/template"; //插入模板
// import 'tinymce/plugins/save' // 保存
// import "tinymce/plugins/searchreplace"; //查询替换
// import "tinymce/plugins/pagebreak"; //分页
// import "tinymce/plugins/insertdatetime"; //时间插入
const props = defineProps({
  modelValue: String,
})
const emit = defineEmits(['update:modelValue'])
//const value = ref("")
const tinymceRef = ref(null)
const init = {
  // width: 720,
  height: 400,
  language_url: import.meta.env.VITE_APP_PUBLIC_PATH + 'static/tinymce/langs/zh_CN.js',
  language: 'zh_CN',
  // 皮肤：这里引入的是public下的资源文件
  skin_url: import.meta.env.VITE_APP_PUBLIC_PATH + 'static/tinymce/skins/ui/oxide',
  theme_url: import.meta.env.VITE_APP_PUBLIC_PATH + 'static/tinymce/themes/silver/theme.min.js',
  content_css: import.meta.env.VITE_APP_PUBLIC_PATH + `static/tinymce/skins/content/default/content.css`,
  // skin_url: 'tinymce/skins/ui/oxide-dark',//黑色系
  plugins: ["image"],
  //plugins: 'wordcount visualchars visualblocks toc textpattern template tabfocus spellchecker searchreplace save quickbars print preview paste pagebreak noneditable nonbreaking media insertdatetime importcss imagetools image hr help fullscreen fullpage directionality codesample code charmap link code table lists advlist anchor autolink autoresize autosave',
  toolbar: ["searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample", "hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen"],
  //default: 'formats undo redo paste print fontsizeselect fontselect template fullpage|wordcount ltr rtl visualchars visualblocks toc spellchecker searchreplace|save preview pagebreak nonbreaking|media image|outdent indent aligncenter alignleft alignright alignjustify lineheight  underline quicklink h2 h3 blockquote numlist bullist table removeformat forecolor backcolor bold italic  strikethrough hr charmap link insertdatetime|subscript superscript cut codesample code |anchor preview fullscreen|help'
  promotion: false,//去掉右上角的tinymcelogo
  branding: false,
  menubar: false,// 隐藏菜单栏
  statusbar: false,// 是否显示底部状态栏
  //convert_urls: false,
  // 初始化完成
  init_instance_callback: (editor) => {
    console.log("初始化完成：", editor)
  },
  // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
  // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
  images_upload_handler: (blobInfo, progress) => {
    return new Promise((resolve, reject) => {
      CMSApiUpload({
        file: blobInfo.blob(),
      }).then(res => {
        if (res.code == 0)
        {
          resolve(import.meta.env.VITE_API_PATH_FULL + '/portal/CMSApi/download?delete=false&fileBusType=Comm&fileNameId=' + res.data.id)
        }else{
          reject(res.message)
        }
      }).catch(err => {
        console.log('err', err)
        reject('上传失败')
      })
    })

    // new Promise((resolve, reject) => {
    //   resolve('data:' + blobInfo.blob().type + ';base64,' + blobInfo.base64())
    // })
  },
  setup: function (editor) {
    editor.on('change', function (e) {
      if (e.level.content == '<p><br data-mce-bogus="1"></p>')
      {
        e.level.content = ''
      }
      emit('update:modelValue', e.level.content)
    })
  },
  init_instance_callback: (editor) => {
    editor.setContent(props.modelValue)
  }
}
//tinymce.activeEditor.resetContent("")//清空内容方法
//tinymce.activeEditor.selection.setContent("");//插入内容方法
onMounted(() => {
  tinymce.init({
    selector: tinymceRef.value,
  })
})
</script>
<style lang="scss" scoped></style>